import * as echarts from 'echarts'
// import { color } from 'highcharts'

/**
 * 饼图
 * @param {*} yData Y轴数据
 * @param {*} category 数据
 * @returns
 */
export const pieChart = (params, seriesData, colors) => {
  const option = {
    color: colors || ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
    title: params.titleArr
      ? params.titleArr.map((v) => {
        return Object.assign(v, {
          text: v.text || '全部任务',
          x: v.x || 'center',
          y: v.y || '15%',
          textStyle: {
            color: v.color || '#000',
            fontSize: v.fontSize || '18'
          }
        })
      })
      : {
        show: params.titleShow || false,
        text: params.titleText || '标题',
        x: params.titleX || 'center',
        textStyle: {
          color: params.titleColor || '#E6A23C',
          fontSize: params.fontSize || '16'
        },
        textAlign: params.titleTextAlign ? params.titleTextAlign : '',
        y: params.titleY || '15%'
      },
    tooltip: {
      show: params.tooltipShow || false,
      trigger: 'item',
      formatter: params.tooltipFormatter,
      confine: true
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {
          name: params.saveAsImageName || '统计图',
          show: params.showSaveAsImage || false
        }
      },
      right: 0,
      iconStyle: {
        borderColor: '#000'
      }
    },
    legend: {
      type: 'scroll',
      show: params.legendShow || false,
      selectedMode: false,
      left: params.legendLeft,
      top: params.legendTop,
      bottom: params.legendBottom,
      itemWidth: params.legendWidth || 25,
      itemHeight: params.legendHeight || 14,
      right: params.legendRight,
      orient: params.legendOrient || 'horizontal',
      textStyle: {
        color: params.legendTextColor || '#000'
      },
      formatter: params.legendFormatter || undefined
    },
    series: seriesData.map((v) => {
      return Object.assign(v, {
        name: v.name,
        type: 'pie',
        radius: v.radius || '50%',
        center: v.center || ['50%', '50%'],
        legendHoverLink: false,
        data: v.data || [
          { value: 1048, name: '乌达区' },
          { value: 735, name: '海勃湾区' },
          { value: 580, name: '海南区' }
        ],
        label: v.label || {
          color: '#000'
        },
        labelLine: v.labelLine || {
          show: true
        },
        emphasis: {
          disable: false,
          scale: false,
          scaleSize: 0
        }
      })
    })
  }
  return option
}

/**
 * 双饼图
 * @param {*} data 数据
 * @param {*} seriesData 数据
 * @param {*} params 配置参数
 * @returns
 */
export const doublePieChart = (data, seriesData, params = {}) => {
  const option = {
    title: {
      text: params.title || '',
      left: '23.5%',
      top: '38.5%',
      textAlign: 'center',
      textStyle: {
        color: '#000',
        fontSize: 20,
        fontFamily: 'YouSheBiaoTiHei-2'
      }
    },
    tooltip: {
      show: true,
      trigger: 'item',
      formatter: undefined,
      confine: true
    },
    legend: {
      selectedMode: false,
      type: 'scroll',
      show: true,
      icon: 'rect',
      itemHeight: params.legendItemHeight || 15,
      itemWidth: params.legendItemWidth || 20,
      itemGap: params.legendItemGap || 10,
      top: 'center',
      right: params.legendRight || 10,
      orient: 'vertical',
      width: '100%',
      textStyle: {
        color: '#606266'
      },
      pageIconSize: 10,
      pageIconColor: 'rgba(66,132,208,1)',
      data: params.legendData || [],
      formatter: (param) => {
        const item = data.find((i) => {
          return i.name === param
        })
        return '\t\t' + item.name + '：' + item.value
      }
    },
    series: [
      // 外圈（数据展示圈）
      {
        name: '',
        type: 'pie',
        radius: ['80%', '60%'],
        center: ['25%', '45%'],
        label: {
          show: false
        },
        tooltip: {
          formatter:
            params.tooltipFormatter ||
            function(params) {
              if (params.name !== '') {
                return params.marker + params.name + ':' + params.value
              }
            }
        },
        // minAngle: 3,
        data: seriesData.map(val => ({
          ...val,
          itemStyle: {
            ...val.itemStyle,
            normal: {
              ...val.itemStyle.normal,
              borderWidth: 3,
              borderColor: '#fff'
            }
          }
        }))
      },
      // 中间圈层
      {
        name: '',
        type: 'pie',
        radius: ['54%', '52%'],
        center: ['25%', '45%'],
        label: {
          show: false
        },
        tooltip: {
          show: false
        },
        data: [
          {
            value: 1,
            name: '',
            itemStyle: {
              normal: {
                color: '#B3C6DC'
              }
            }
          }
        ]
      },
      // 最内圈层
      {
        name: '',
        type: 'pie',
        radius: ['47%', '42%'],
        center: ['25%', '45%'],
        label: {
          show: false
        },
        tooltip: {
          show: false
        },
        data: [
          {
            value: 3,
            name: '',
            itemStyle: {
              normal: {
                color: 'transparent'
              }
            }
          },
          {
            value: 2,
            name: '',
            itemStyle: {
              normal: {
                color: '#B3C6DC'
              }
            }
          },
          {
            value: 3,
            name: '',
            itemStyle: {
              normal: {
                color: 'transparent'
              }
            }
          },
          {
            value: 3,
            name: '',
            itemStyle: {
              normal: {
                color: 'transparent'
              }
            }
          },
          {
            value: 2,
            name: '',
            itemStyle: {
              normal: {
                color: '#B3C6DC'
              }
            }
          },
          {
            value: 3,
            name: '',
            itemStyle: {
              normal: {
                color: 'transparent'
              }
            }
          }
        ]
      }
    ]
  }
  return option
}

/**
 * 折线图
 * @param {*} dataX 横坐标
 * @param {*} seriesData 数据
 * @param {*} params 其他参数
 * @returns
 */
export const lineChart = (dataX, seriesData, params = {}) => {
  const option = {
    legend: params.isWind
      ? {
        type: 'scroll',
        show: params.legendShow || false,
        selectedMode: false,
        left: params.legendLeft || 'center',
        top: params.legendTop || 'auto',
        bottom: params.legendBottom || 'auto',
        right: params.legendRight || 'center',
        orient: params.legendOrient || 'horizontal',
        textStyle: {
          color: params.legendTextColor || '#000'
        },
        data: params.legendData
      }
      : {
        type: 'scroll',
        show: params.legendShow || false,
        selectedMode: false,
        left: params.legendLeft || 'center',
        top: params.legendTop || 'auto',
        bottom: params.legendBottom || 'auto',
        right: params.legendRight || 'center',
        orient: params.legendOrient || 'horizontal',
        textStyle: {
          color: params.legendTextColor || '#000'
        },
        formatter: params.legendFormatter || '',
        pageTextStyle: {
          color: '#333'
        },
        selected: params.legendSelected ? params.legendSelected : ''
      },
    tooltip: {
      show: params.tooltipShow || false,
      trigger: 'axis',
      axisPointer: {
        type: params.tooltipType || 'shadow'
      },
      formatter: params.tooltipFormatter,
      confine: true
    },
    grid: {
      top: params.gridTop || '10%',
      right: params.gridRight || '5%',
      left: params.gridLeft || '5%',
      bottom: params.gridBottom || '5%',
      containLabel: true
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {
          name: params.saveAsImageName || '统计图',
          show: params.showSaveAsImage || false
        }
      },
      right: 10,
      iconStyle: {
        borderColor: '#000'
      }
    },
    xAxis: params.isMorexAxis
      ? dataX.map((v) => {
        return Object.assign(v, {
          type: 'category',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#506b7c'
            }
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: '#506b7c'
            }
          },
          axisLabel: {
            color: '#9eccef',
            width: 100
          },
          splitLine: {
            show: false
          },
          data: v.data
        })
      })
      : {
        type: 'category',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#333333'
          }
        },
        axisTick: {
          show: true,
          lineStyle: {
            color: '#333333'
          }
        },
        axisLabel: {
          color: '#333333',
          lineHeight: 15,
          rotate: params.rotate,
          formatter: (text) => {
            let newParamsName = ''
            const paramsNameNumber = text.length
            const provideNumber = params.wordWrapNum || 5
            const rowNumber = Math.ceil(paramsNameNumber / provideNumber)
            for (let row = 0; row < rowNumber; row++) {
              const isH = row !== rowNumber - 1 ? '\n' : ''
              newParamsName += text.substring(row * provideNumber, (row + 1) * provideNumber) + isH
            }
            return params.isXWordWrap ? newParamsName : text
          }
        },
        splitLine: {
          show: false
        },
        data: dataX,
        boundaryGap: params.xAxisBoundaryGap !== undefined ? params.xAxisBoundaryGap : true
      },
    yAxis: params.isMoreyAxis
      ? [
        {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed', // 虚线
              color: '#00BFF3',
              opacity: 0.23
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#506b7c'
            }
          },
          axisLabel: {
            show: true,
            margin: 20,
            textStyle: {
              color: '#333333'
            },
            formatter: params.moreyAxisFormatter0 || '{value}'
          },
          axisTick: {
            show: false
          }
        },
        {
          type: 'value',
          position: 'right',
          interval: params.yAxisInterVal2 || 10,
          splitLine: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#506b7c'
            }
          },
          axisLabel: {
            show: true,
            margin: 20,
            textStyle: {
              color: '#333333'
            },
            formatter: params.moreyAxisFormatter1 || '{value}'
          },
          name: params.yAxisName2 ? params.yAxisName2 : '',
          nameTextStyle: {
            color: '#9eccef',
            fontWeight: 'bold'
          },
          axisTick: {
            show: false
          },
          max: function(value) {
            if (params.yAxisMax) {
              return params.yAxisMax
            } else {
              return 100
            }
          },
          min: function(value) {
            if (params.yAxisMin) {
              return params.yAxisMin
            } else {
              return -100
            }
          }
        }
      ]
      : {
        type: 'value',
        name: params.yAxisName,
        nameTextStyle: {
          fontSize: 12,
          color: '#ecfaff',
          align: 'left',
          padding: [0, 0, 0, -20]
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed', // 虚线
            color: '#00BFF3',
            opacity: 0.23
          }
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#333333'
          }
        },
        axisLabel: {
          show: true,
          margin: 20,
          textStyle: {
            color: '#333333'
          },
          formatter: params.yAxisFormatter || '{value}'
        },
        axisTick: {
          show: false
        }
      },
    dataZoom: [
      {
        show: params.isShowDataZoom || false,
        type: 'slider',
        start: 0,
        end: params.dataZoomEnd ? params.dataZoomEnd : 100,
        textStyle: {
          color: '#fff'
        },
        right: params.dataZoomRight ? params.dataZoomRight : '7%',
        left: params.dataZoomLeft ? params.dataZoomLeft : '7%',
        rangeMode: ['value', 'percent'],
        labelFormatter: function(value) {
          if (!Object.is(value, NaN)) {
            return dataX[value].slice(5, 10) + '\n' + dataX[value].slice(10, 14) + '时'
          }
        }
      }
    ],
    series: seriesData.map((v) => {
      return Object.assign(v, {
        name: v.name,
        type: v.type || 'line',
        symbol: v.symbol || 'circle',
        symbolSize: v.symbolSize || 8,
        smooth: v.smooth || false,
        lineStyle: v.lineStyle
          ? v.lineStyle
          : {
            normal: {
              color: v.lineStyleColor || ''
            }
          },
        label: {
          show: v.labelShow || false,
          position: v.labelPosition || 'top',
          textStyle: {
            color: v.labelTextColor || '#00ffff'
          }
        },
        itemStyle: {
          normal: {
            color: v.isItemStyleGradient
              ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: v.itemStyleColorArr[0] },
                { offset: 1, color: v.itemStyleColorArr[1] }
              ])
              : v.itemStyleColor
                ? v.itemStyleColor
                : '',
            borderWidth: 1,
            borderColor: '#fff'
          }
        },
        areaStyle: v.isAreaStyleGradient
          ? {
            normal: {
              color: new echarts.graphic.LinearGradient(v.areaGradientAngle ? v.areaGradientAngle : 0, 0, 0, 1, [
                {
                  offset: 0,
                  color: v.areaStyleColorArr[0]
                },
                {
                  offset: 0.7,
                  color: v.areaStyleColorArr[1]
                },
                {
                  offset: 1,
                  color: v.areaStyleColorArr[1]
                }
              ])
            }
          }
          : { normal: { color: v.areaStyleColor ? v.areaStyleColor : 'rgba(0,0,0,0)' }},
        data: v.data
      })
    })
  }
  return option
}

/**
 * 横向折线图
 * @param dataY
 * @param {*} seriesData 数据
 * @param {*} params 其他参数
 * @returns
 */
export const lineHorizontalChart = (dataY, seriesData, params = {}) => {
  const option = {
    legend: {
      type: 'scroll',
      show: params.legendShow || false,
      selectedMode: false,
      left: params.legendLeft || 'center',
      top: params.legendTop || 'auto',
      bottom: params.legendBottom || 'auto',
      right: params.legendRight || 'center',
      orient: params.legendOrient || 'horizontal',
      textStyle: {
        color: params.legendTextColor || '#000'
      }
    },
    tooltip: {
      show: params.tooltipShow || false,
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: params.tooltipFormatter,
      confine: true
    },
    grid: {
      top: params.gridTop || '15%',
      right: params.gridRight || '5%',
      left: params.gridLeft || '5%',
      bottom: params.gridBottom || '5%',
      containLabel: true
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {
          name: params.saveAsImageName || '统计图',
          show: params.showSaveAsImage || false
        }
      },
      right: 10,
      iconStyle: {
        borderColor: '#000'
      }
    },
    yAxis: params.isMoreyAxis
      ? dataY.map((v) => {
        return Object.assign(v, {
          type: 'category',
          axisLine: {
            show: false,
            color: '#aaa'
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#9eccef',
            width: 100
          },
          splitLine: {
            show: false
          },
          inverse: true,
          data: v.data
        })
      })
      : {
        type: 'category',
        axisLine: {
          show: params.yAxisLine || false,
          color: '#333'
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#333',
          lineHeight: 15,
          formatter: (text) => {
            let newParamsName = ''
            const paramsNameNumber = text.length
            const provideNumber = params.wordWrapNum || 5
            const rowNumber = Math.ceil(paramsNameNumber / provideNumber)
            for (let row = 0; row < rowNumber; row++) {
              const isH = row !== rowNumber - 1 ? '\n' : ''
              newParamsName += text.substring(row * provideNumber, (row + 1) * provideNumber) + isH
            }
            return params.isYWordWrap ? newParamsName : text
          }
        },
        splitLine: {
          show: false
        },
        data: dataY
      },
    xAxis: params.isMorexAxis
      ? [
        {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed', // 虚线
              color: '#00BFF3',
              opacity: 0.23
            }
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            margin: 20,
            textStyle: {
              color: '#9eccef'
            }
          },
          axisTick: {
            show: false
          }
        },
        {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            margin: 20,
            textStyle: {
              color: '#9eccef'
            }
          },
          axisTick: {
            show: false
          }
        }
      ]
      : {
        type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed', // 虚线
            color: '#00BFF3',
            opacity: 0.23
          }
        },
        name: params.xAxisName ? params.xAxisName : '',
        nameLocation: 'middle',
        nameGap: 30,
        minInterval: params.xMinInterval || 0,
        axisLine: {
          show: params.xAxisLine || false
        },
        axisLabel: {
          show: true,
          // formatter: params.dw ? '{value}' + params.dw : '{value}',
          formatter: params.formatterFun ? params.formatterFun : function(value, index) {
            if (params.dw) {
              return value + params.dw
            } else {
              if (Number(value) % 1 !== 0) {
                return ''
              } else {
                return Math.floor(value)
              }
            }
          },
          margin: 10,
          textStyle: {
            color: '#333'
          },
          rotate: params.rotate
        },
        axisTick: {
          show: false
        }
      },
    series: seriesData.map((v) => {
      return Object.assign(v, {
        name: v.name,
        type: v.type || 'line',
        symbol: v.symbol || 'circle',
        symbolSize: v.symbolSize || 8,
        smooth: v.smooth || false,
        showBackground: v.showBackground || false,
        backgroundStyle: {
          color: v.backgroundStyleColor || 'rgba(0, 0, 0, 0)'
        },
        lineStyle: v.lineStyle
          ? v.lineStyle
          : {
            normal: {
              color: v.lineStyleColor || '#00ffff'
            }
          },
        label: {
          show: v.labelShow || false,
          position: v.labelPosition || 'top',
          textStyle: {
            color: v.labelTextColor || '#00ffff'
          },
          formatter: v.labelFormatter || '{c}'
        },
        itemStyle: {
          normal: {
            color: v.isItemStyleGradient
              ? new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: v.itemStyleColorArr[0] },
                { offset: 1, color: v.itemStyleColorArr[1] }
              ])
              : v.itemStyleColor
                ? v.itemStyleColor
                : '#00ffff'
          }
        },
        areaStyle: v.isAreaStyleGradient
          ? {
            normal: {
              color: new echarts.graphic.LinearGradient(v.areaGradientAngle ? v.areaGradientAngle : 0, 0, 0, 1, [
                {
                  offset: 0,
                  color: v.areaStyleColorArr[0]
                },
                {
                  offset: 0.7,
                  color: v.areaStyleColorArr[1]
                },
                {
                  offset: 1,
                  color: v.areaStyleColorArr[1]
                }
              ])
            }
          }
          : { normal: { color: v.areaStyleColor ? v.areaStyleColor : 'rgba(0,0,0,0)' }},
        data: v.data
      })
    })
  }
  return option
}

/**
 * 3d饼图
 * @param {*} seriesData 数据
 * @param {Object} params 参数
 * @returns
 */
export const hight3dPieChart = (seriesData, params) => {
  const option = {
    colors: params.colors || ['#00c3f8', '#2cff95', '#ffda00', '#ff9750', '#ff2400', '#7b7bff', '#d374f4', '#ff6490', '#ff9750', '#ffbb00', '#a0e200', '#f1b960'],
    chart: {
      backgroundColor: 'rgba(0,0,0,0)',
      type: 'pie',
      marginRight: params.marginRight || 0,
      options3d: {
        enabled: true,
        alpha: params.alpha || 0
      }
    },
    tooltip: {
      shared: true,
      useHTML: true,
      formatter: function() {
        return `<p style="font-size: 14px;font-weight:bold">${this.key}</p><p>${this.series.name}：<span style='color:${this.color};font-weight:bold'>${this.y}</span>${params.dataUnit || '个'} 占比：<span style='color:${this.color};font-weight:bold'>${this.percentage.toFixed(2)}</span>%</p>`
      },
      backgroundColor: 'rgba(255,255,255,1)'
    },
    title: {
      text: params.title || '',
      verticalAlign: 'middle',
      x: params.titleX || 0,
      y: params.titleY || null,
      useHTML: true,
      style: {
        color: '#000',
        fontSize: '30px',
        textAlign: 'center'
      }
    },
    subtitle: {
      text: params.subtitle || '',
      verticalAlign: 'middle',
      x: params.subtitleX || 0,
      y: params.subtitleY || null,
      useHTML: true,
      style: {
        color: '#4f5a6d',
        fontSize: '16px',
        textAlign: 'center'
      }
    },
    legend: {
      useHTML: true,
      layout: params.layout || 'vertical',
      align: params.align || 'right',
      verticalAlign: params.verticalAlign || 'middle',
      x: params.legendX || 0,
      y: params.legendY || 0,
      squareSymbol: params.squareSymbol || false,
      selectedMode: false,
      symbolWidth: params.symbolWidth || 16,
      symbolHeight: params.symbolHeight || 5,
      symbolRadius: params.symbolRadius || 0,
      symbolPadding: params.symbolPadding || 5,
      itemMarginTop: params.itemMarginTop || 0,
      itemMarginBottom: params.itemMarginBottom || 0,
      itemDistance: params.itemDistance || 20,
      width: params.legendWidth || 'auto',
      itemStyle: {
        color: '#000',
        fontSize: '12px',
        fontWeight: 'normal'
      },
      itemHoverStyle: {
        color: '#ccc'
      },
      navigation: {
        style: {
          color: '#fff'
        }
      },
      labelFormatter: function() {
        return `<p><span style="display: inline-block; width: ${params.legendLabelWidth || 60}px">${this.name}</span>${this.percentage.toFixed(2)}%</p>`
      }
    },
    credits: {
      enabled: false
    },
    plotOptions: {
      pie: {
        size: params.size || '80%',
        innerSize: params.innerSize || '65%',
        depth: params.depth || 0,
        center: params.center || ['50%', '50%'],
        states: {
          inactive: {
            opacity: 1
          }
        },
        dataLabels: {
          style: {
            textOutline: 'none',
            fontSize: params.dataLabelsFontSize || '30px',
            fontWeight: 'normal'
          },
          distance: params.distance || 30,
          enabled: params.showLabel || false,
          format: params.format || '<div style="color:{point.color}">{point.name}</div>'
        },
        showInLegend: params.showLegend || false
      }
    },
    series: seriesData.map((v) => {
      return {
        name: v.name,
        data: v.data
      }
    })
  }
  return option
}

/**
 * 水波图
 * @param {Array} data 数据
 * @param {String} title 名称
 * @param {Array} borderC 边框颜色
 * @param {Array} color0 0%处的颜色
 * @param {Array} color100 100%处的颜色
 * @returns
 */
export const liquidChart = (params) => {
  const option = {
    // 图表主标题
    title: {
      show: params.showTitle !== false,
      text: params.title || '',
      // x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
      x: 'center',
      // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
      y: 'bottom',
      // itemGap设置主副标题纵向间隔，单位px，默认为10，
      itemGap: 30,

      // 主标题文本样式设置
      textStyle: {
        fontSize: 16,
        fontWeight: '500',
        color: '#fff'
      }
      // 副标题文本样式设置
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {
          name: params.saveAsImageName || '统计图',
          show: params.showSaveAsImage || false
        }
      },
      right: 50,
      iconStyle: {
        borderColor: '#000'
      }
    },
    // 提示框组件
    tooltip: {
      show: false,
      trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
      textStyle: {
        color: '#fff' // 文字颜色
      },
      // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
      // 水球图: {a}（系列名称），{b}（无），{c}（数值）
      // 使用函数模板   传入的数据值 -> value: number|Array,
      formatter: function(value) {
        return value.seriesName + ': ' + value.data * 100 + '%'
      }
    },
    series: [
      {
        type: 'liquidFill',
        name: params.title || '', // 系列名称，用于tooltip的显示，legend 的图例筛选
        radius: params.radius || '86%', // 水球图的半径
        center: params.center || ['50%', '50%'], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
        // 水填充图的形状 circle 默认圆形  rect 圆角矩形  triangle 三角形
        // diamond 菱形  pin 水滴状 arrow 箭头状  还可以是svg的path
        shape: 'circle',
        phase: 12, // 波的相位弧度 不设置  默认自动
        direction: 'right', // 波浪移动的速度  两个参数  left 从右往左 right 从左往右
        outline: {
          show: true,
          borderDistance: 0, // 边框线与图表的距离 数字
          itemStyle: {
            opacity: 0.9, // 边框的透明度   默认为 1
            borderWidth: 2, // 边框的宽度
            shadowBlur: 14, // 边框的阴影范围 一旦设置了内外都有阴影
            shadowColor: '#fff', // 边框的阴影颜色,
            borderColor: params.borderC // 边框颜色
          }
        },
        // 图形样式
        itemStyle: {
          shadowBlur: 10, // 波浪的阴影范围
          padding: 10
        },
        backgroundStyle: {
          color: params.bgColor || 'rgba(21, 41, 45, .5)' // 水球未到的背景颜色
        },
        // 图形的高亮样式
        emphasis: {
          itemStyle: {
            opacity: 1 // 鼠标经过波浪颜色的透明度
          }
        },
        // 图形上的文本标签
        label: {
          fontSize: 36,
          fontWeight: 400,
          color: params.borderC
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 1,
                color: params.color0 // 0% 处的颜色
              },
              {
                offset: 0.3,
                color: params.color1 // 0% 处的颜色
              },
              {
                offset: 0.15,
                color: params.color2 // 100% 处的颜色
              },
              {
                offset: 0,
                color: params.color3 // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        ],
        data: params.data // 系列中的数据内容数组
      }
    ]
  }
  return option
}

/**
 * 雷达图
 * @param {Object} params 其他参数
 * @returns
 */
export const radarChart = (params) => {
  const option = {
    tooltip: {
      trigger: 'axis',
      confine: true
    },
    legend: {
      orient: params.legendOrient || 'horizontal',
      selectedMode: false,
      left: params.legendLeft || 'center',
      right: params.legendRight || 'center',
      bottom: params.legendBottom,
      top: params.legendTop,
      textStyle: {
        color: params.legendColor || '#333'
      },
      data: params.legend || []
    },
    radar: {
      center: params.center || ['50%', '50%'],
      indicator: params.indicator.map((indicator) => {
        const obj = {
          text: indicator.text,
          max: indicator.max || 100,
          color: '#333'
        }
        return obj
      }),
      triggerEvent: true,
      radius: params.radius || '63%',
      startAngle: 90,
      splitNumber: 2,
      nameGap: 8,
      // shape: params.shape || 'circle',
      name: {
        textStyle: {
          color: '#333'
        }
      },
      splitArea: {
        areaStyle: {
          color: '#25438e',
          opacity: 0.2
        }
      },
      axisLine: {
        show: params.axisLine || false
      },
      splitLine: {
        lineStyle: {
          color: '#999',
          width: 1
        }
      }
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {
          name: params.saveAsImageName || '统计图',
          show: params.showSaveAsImage || false
        }
      },
      right: 50,
      iconStyle: {
        borderColor: '#000'
      }
    },
    series: params.seriesData.map((v, i) => {
      const defaultSeries = {
        name: v.name || '数据资源监控',
        type: v.type || 'radar',
        tooltip: v.tooltip || {
          trigger: 'item'
        },
        itemStyle: v.itemStyle || {
          color: '#159FFF'
        },
        areaStyle: v.areaStyle || {
          color: '#159FFF',
          opacity: 0.2
        }
      }
      return Object.assign(v, defaultSeries)
    })
  }
  return option
}

/**
 * 伪3D柱状图
 * @param {Array} xData 横轴
 * @param {Array} data 数据
 * @param {Object} attr 数据名称
 * @returns
 */
export const bar3DChart = (params) => {
  const option = {
    tooltip: {
      trigger: 'axis',
      formatter: function(arr) {
        let resultTooltip = ''
        arr.forEach(v => {
          if (v.componentIndex === 2) {
            resultTooltip += v.axisValue + '<br>' + v.marker + v.seriesName + '：' + v.value + '%<br>'
          } else if (v.componentIndex === 7) {
            resultTooltip += v.marker + v.seriesName + '：' + v.value + '%'
          }
        })
        return resultTooltip
      }
    },
    grid: {
      left: 38,
      right: 0,
      top: 30,
      bottom: 35
    },
    legend: {
      show: true,
      selectedMode: false,
      orient: 'horizontal',
      top: 0,
      right: 'center',
      itemWidth: 15,
      itemHeight: 10,
      itemGap: 30,
      textStyle: {
        color: '#fff',
        fontSize: 14
      },
      data: [
        {
          name: params.name1,
          itemStyle: {
            color: getColor('1', 'zt')
          }
        },
        {
          name: params.name2,
          itemStyle: {
            color: getColor('2', 'zt')
          }
        }
      ]
    },
    xAxis: [
      {
        data: params.xData,
        axisLabel: {
          show: true,
          interval: 0,
          textStyle: {
            color: '#eaf9fc'
          },
          formatter: function(name) {
            if (name.length > 4) {
              const index = Math.ceil(name.length / 2)
              return name.slice(0, index) + '\n' + name.slice(index, name.length)
            } else {
              return name
            }
          },
          margin: 10 // 刻度标签与轴线之间的距离。
        },
        axisLine: {
          show: true, // 不显示x轴
          lineStyle: {
            type: 'solid',
            color: '#fff'
          }
        },
        axisTick: {
          show: false // 不显示刻度
        },
        boundaryGap: true,
        splitLine: {
          show: false,
          width: 0.08,
          lineStyle: {
            type: 'solid',
            color: '#97ABEA'
          }
        }
      },
      {
        data: params.xData,
        type: 'category',
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitArea: {
          show: false
        },
        splitLine: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        show: true,
        boundaryGap: false,
        min: 0,
        splitLine: {
          show: false,
          lineStyle: {
            type: 'dashed', // 虚线
            color: '#00BFF3'
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false,
          lineStyle: {
            type: 'solid',
            color: '#97ABEA'
          }
        },
        axisLabel: {
          textStyle: {
            color: '#eaf9fc'
          },
          formatter: '{value}%'
        },
        data: params.ydata
      }
    ],
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {
          name: params.saveAsImageName || '统计图',
          show: params.showSaveAsImage || false
        }
      },
      right: 50,
      iconStyle: {
        borderColor: '#000'
      }
    },
    series: [
      { // 柱体1顶部
        name: '',
        type: 'pictorialBar',
        symbolSize: [15, 5],
        symbolOffset: [-9, -3],
        symbolPosition: 'end',
        z: 15,
        itemStyle: {
          color: function(param) {
            return getColor('1', 'top')
          }
        },
        zlevel: 2,
        data: params.data1
      },
      { // 柱体1底部
        name: '',
        type: 'pictorialBar',
        symbolSize: [15, 5],
        symbolOffset: [-9, 3],
        z: 12,
        itemStyle: {
          color: function(param) {
            return getColor('1', 'bot')
          }
        },
        color: '#ffc241',
        show: false,
        data: params.minData
      },
      { // 柱体1
        name: params.name1,
        type: 'bar',
        barGap: '20%',
        barWidth: 15,
        itemStyle: {
          normal: {
            color: function(param) {
              return getColor('1', 'zt')
            },
            borderWidth: 1,
            borderType: 'solid'
          }
        },
        label: {
          show: false,
          formatter: '{c}' + '%',
          position: 'top',
          color: '#fff',
          fontSize: 12,
          textAlign: 'center'
        },
        zlevel: 2,
        data: params.data1
      },
      { // 柱体1背景
        name: '',
        type: 'bar',
        xAxisIndex: 1,
        barGap: '20%',
        data: params.maxData,
        zlevel: 1,
        barWidth: 15,
        itemStyle: {
          normal: {
            color: function(param) {
              return getColor('1', 'bg')
            }
          }
        }
      },
      { // 柱体1背景封顶
        name: '',
        type: 'effectScatter',
        rippleEffect: {
          period: 1,
          scale: 3, // 控制上方蓝色动态效果封顶大小
          brushType: 'fill'
        },
        z: 20,
        zlevel: 3,
        symbolPosition: 'end',
        // symbol: path,
        symbolSize: [10, 4],
        symbolOffset: [-9, 0], // 控制上方蓝色动态效果封顶位置
        itemStyle: {
          normal: {
            shadowColor: 'rgba(0, 0, 0, .3)',
            shadowBlur: 5,
            shadowOffsetY: 3,
            shadowOffsetX: 0,
            color: function(param) {
              return getColor('1', 'top')
            }
          }
        },
        data: params.maxData
      },
      { // 柱体2顶部
        name: '',
        type: 'pictorialBar',
        symbolSize: [15, 5],
        symbolOffset: [9, -3],
        symbolPosition: 'end',
        z: 15,
        itemStyle: {
          color: function(param) {
            return getColor('2', 'top')
          }
        },
        zlevel: 2,
        data: params.data2
      },
      { // 柱体2底部
        name: '',
        type: 'pictorialBar',
        symbolSize: [15, 5],
        symbolOffset: [9, 3],
        z: 12,
        itemStyle: {
          color: function(param) {
            return getColor('2', 'bot')
          }
        },
        color: '#ffc241',
        show: false,
        data: params.minData
      },
      { // 柱体2
        name: params.name2,
        type: 'bar',
        barGap: '20%',
        barWidth: 15,
        itemStyle: {
          color: function(param) {
            return getColor('2', 'zt')
          },
          borderWidth: 1,
          borderType: 'solid'
        },
        label: {
          show: false,
          formatter: '{c}' + '%',
          position: 'top',
          color: '#fff',
          fontSize: 12,
          textAlign: 'center'
        },
        zlevel: 2,
        data: params.data2
      },
      { // 柱体2背景
        name: '',
        type: 'bar',
        xAxisIndex: 1,
        barGap: '20%',
        data: params.maxData,
        zlevel: 1,
        barWidth: 15,
        itemStyle: {
          normal: {
            color: function(param) {
              return getColor('2', 'bg')
            }
          }
        }
      },
      { // 柱体2背景封顶
        name: '',
        type: 'effectScatter',
        rippleEffect: {
          period: 1,
          scale: 3, // 控制上方蓝色动态效果封顶大小
          brushType: 'fill'
        },
        z: 20,
        zlevel: 3,
        symbolPosition: 'end',
        // symbol: path,
        symbolSize: [10, 4],
        symbolOffset: [9, 0], // 控制上方蓝色动态效果封顶位置
        itemStyle: {
          normal: {
            shadowColor: 'rgba(0, 0, 0, .3)',
            shadowBlur: 5,
            shadowOffsetY: 3,
            shadowOffsetX: 0,
            color: function(param) {
              return getColor('2', 'top')
            }
          }
        },
        data: params.maxData
      }
    ]
  }
  return option
}
export const getColor = (data, type) => {
  const ztColor1 = {
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    type: 'linear',
    global: false,
    colorStops: [
      {
        // 第一节下面
        offset: 0,
        color: '#fdaf58'
      },
      {
        offset: 0.5,
        color: '#fdc958'
      },
      {
        offset: 1,
        color: '#fde163'
      }
    ]
  }
  const ztColor2 = {
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    type: 'linear',
    global: false,
    colorStops: [
      {
        // 第一节下面
        offset: 0,
        color: '#014fce'
      },
      {
        offset: 0.5,
        color: '#088de8'
      },
      {
        offset: 1,
        color: '#0db7fa'
      }
    ]
  }
  const topColor1 = {
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    type: 'linear',
    global: false,
    colorStops: [
      {
        // 第一节下面
        offset: 0,
        color: '#fdaf58'
      },
      {
        offset: 1,
        color: '#fde163'
      }
    ]
  }
  const topColor2 = {
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    type: 'linear',
    global: false,
    colorStops: [
      {
        // 第一节下面
        offset: 0,
        color: '#014fce'
      },
      {
        offset: 1,
        color: '#0db7fa'
      }
    ]
  }
  const botColor1 = {
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    type: 'linear',
    global: false,
    colorStops: [
      {
        // 第一节下面
        offset: 0,
        color: '#fde163'
      },
      {
        offset: 1,
        color: '#fdaf58'
      }
    ]
  }
  const botColor2 = {
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    type: 'linear',
    global: false,
    colorStops: [
      {
        // 第一节下面
        offset: 0,
        color: '#0db7fa'
      },
      {
        offset: 1,
        color: '#014fce'
      }
    ]
  }
  const bgColor = ['rgba(253,179,88,.36)', 'rgba(1,80,207,.36)']
  if (type === 'zt') {
    switch (data) {
      case '1':
        return ztColor1
      case '2':
        return ztColor2
    }
  } else if (type === 'bg') {
    switch (data) {
      case '1':
        return bgColor[0]
      case '2':
        return bgColor[1]
    }
  } else if (type === 'top') {
    switch (data) {
      case '1':
        return topColor1
      case '2':
        return topColor2
    }
  } else if (type === 'bot') {
    switch (data) {
      case '1':
        return botColor1
      case '2':
        return botColor2
    }
  }
}

/**
 * 仪表盘
 * @param {*} angle 角度
 * @param {*} params 配置参数
 * @returns
 */
export const gaugeChart = (percentage, params = {}, isCustomTooltipFormatter = false) => {
  const option = {
    tooltip: {
      formatter: isCustomTooltipFormatter ? (arr) => {
        return `${arr.seriesName}<br>${arr.value}`
      } : '{a} <br/>{b} : {c}%',
      position: 'top'
    },
    series: [
      {
        name: params.formatterData || '数据传输率',
        type: 'gauge',
        radius: '78%',
        detail: {
          formatter: '{value}'
        },
        splitNumber: 10,
        axisLabel: {
          show: params.showAxisLabel,
          distance: -50,
          color: '#000',
          fontSize: 14,
          formatter: '{value}%'
        },
        axisTick: {
          show: true,
          lineStyle: {
            color: params.lineStyleColor || '#000'
          }
        },
        splitLine: {
          show: false
        },
        pointer: {
          itemStyle: {
            color: params.itemStyleColor || '#000'
          },
          length: '55%'
        },
        axisLine: {
          roundCap: true,
          lineStyle: {
            width: params.axisLineWidth || 20,
            color: params.axisLineColorArray || [
              [0, '#00C0FF'],
              [0.2, '#25C8E0'],
              [0.4, '#FFDC2C'],
              [0.6, '#FF972C'],
              [0.8, '#FF5D30'],
              [1, '#F53F3F']
            ]
          }
        },
        data: [
          {
            value: percentage,
            name: params.name,
            title: {
              color: params.titleColor || '#000',
              offsetCenter: params.titleOffsetCenter || [0, '100%'],
              fontSize: params.titleFontSize || 15
            },
            detail: {
              color: params.detailColor || '#000',
              offsetCenter: params.detailOffsetCenter || [0, '75%'],
              formatter: params.formatter || function(value) {
                return value.toFixed(0) + '%'
              },
              fontSize: params.detailFontSize || 24
            }
          }
        ]
      }
    ]
  }
  return option
}

/**
 * 横向间隔图
 * @param {*} yData Y轴数据
 * @param {*} category 数据
 * @returns
 */
export const barGapChart = (yData, category) => {
  const option = {
    xAxis: {
      max: 1000,
      splitLine: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    grid: {
      left: 0,
      top: 10, // 设置条形图的边距
      right: 60,
      bottom: 0,
      containLabel: true
    },
    yAxis: [
      {
        type: 'category',
        inverse: true,
        data: yData,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          formatter: (params) => {
            let newParamsName = ''
            const paramsNameNumber = params.length
            const provideNumber = 12
            const rowNumber = Math.ceil(paramsNameNumber / provideNumber)
            for (let row = 0; row < rowNumber; row++) {
              newParamsName += params.substring(row * provideNumber, (row + 1) * provideNumber) + (row !== rowNumber - 1 ? '\n' : '')
            }
            return newParamsName
          },
          color: '#fff',
          align: 'right',
          lineHeight: 15
        }
      }
    ],
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {
          name: '统计图',
          show: false
        }
      },
      right: 50,
      iconStyle: {
        borderColor: '#000'
      }
    },
    series: [
      {
        // 内
        type: 'bar',
        barWidth: 18,
        legendHoverLink: false,
        stack: '1',
        itemStyle: {
          color: 'rgba(0,0,0,0)'
        },
        z: 10,
        data: yData.map((v) => {
          return 1
        })
      },
      {
        // 内
        type: 'bar',
        barWidth: 18,
        legendHoverLink: false,
        stack: '1',
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: '#12fff7' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#0dacff' // 100% 处的颜色
              }
            ]
          }
        },
        data: category
      },
      {
        // 分隔
        type: 'pictorialBar',
        itemStyle: {
          color: '#02121e'
        },
        symbolRepeat: 'fixed',
        symbolMargin: 5,
        symbol: 'roundRect',
        symbolClip: true,
        symbolSize: [2, 21],
        symbolPosition: 'start',
        symbolOffset: [2, -2],
        symbolBoundingData: 1000,
        data: category,
        z: 12,
        animationEasing: 'elasticOut'
      },
      {
        // 外边框
        type: 'pictorialBar',
        symbol: 'rect',
        symbolBoundingData: 1000,
        symbolMargin: 0,
        // symbolOffset: [-200, -2],
        itemStyle: {
          normal: {
            color: 'none'
          }
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            offset: [10, 0], // 设置右边数据位置
            formatter: '{c}',
            textStyle: {
              color: '#ffffff',
              fontSize: 12,
              fontWeight: 600
            }
          }
        },
        data: category,
        z: 0,
        animationEasing: 'elasticOut'
      },
      {
        name: '外框',
        type: 'bar',
        barGap: '-120%', // 设置外框粗细
        data: yData.map((v) => {
          return 1000
        }),
        barWidth: 25,
        animation: false,
        itemStyle: {
          normal: {
            color: 'rgba(0,0,0,0)', // 填充色
            barBorderColor: '#0ca5ff', // 边框色
            barBorderWidth: 1, // 边框宽度
            barBorderRadius: 3 // 圆角半径
          }
        },
        z: 0
      }
    ]
  }
  return option
}

/**
 * 纵向间隔图
 * @param {*} xData x轴数据
 * @param {*} category 数据
 * @returns
 */
export const ybarGapChart = (xData, category, maxValue) => {
  const option = {
    yAxis: {
      max: maxValue,
      splitLine: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: true,
        color: '#12fdf7'
      },
      axisTick: {
        show: false
      }
    },
    grid: {
      left: 0,
      top: 20, // 设置条形图的边距
      right: 20,
      bottom: 0,
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        inverse: true,
        data: xData,
        axisLine: {
          show: true
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          formatter: (value) => {
            return value.slice(0, 9) + '\n' + value.slice(9, value.length)
          },
          color: '#12fdf7'
        }
      }
    ],
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {
          name: '统计图',
          show: false
        }
      },
      right: 50,
      iconStyle: {
        borderColor: '#000'
      }
    },
    series: [
      {
        // 内
        type: 'bar',
        barWidth: 18,
        legendHoverLink: false,
        stack: '1',
        itemStyle: {
          color: 'rgba(0,0,0,0)'
        },
        z: 10,
        data: xData.map((v) => {
          return 0
        })
      },
      {
        // 内
        type: 'bar',
        barWidth: 18,
        legendHoverLink: false,
        stack: '1',
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#12fff7' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#0dacff' // 100% 处的颜色
              }
            ]
          }
        },
        data: category
      },
      {
        // 分隔
        type: 'pictorialBar',
        itemStyle: {
          color: '#02121e'
        },
        symbolRepeat: 'fixed',
        symbolMargin: 5,
        symbol: 'roundRect',
        symbolClip: true,
        symbolSize: [21, 2],
        symbolPosition: 'start',
        symbolOffset: [-2, 2],
        symbolBoundingData: maxValue / 2,
        data: category,
        z: 12,
        animationEasing: 'elasticOut'
      },
      {
        // 外边框
        type: 'pictorialBar',
        symbol: 'rect',
        symbolBoundingData: maxValue,
        symbolMargin: 0,
        itemStyle: {
          normal: {
            color: 'none'
          }
        },
        label: {
          normal: {
            show: true,
            position: 'top',
            offset: [-2, 0], // 设置右边数据位置
            formatter: '{c}',
            textStyle: {
              color: '#ffffff',
              fontSize: 12,
              fontWeight: 600
            }
          }
        },
        data: category,
        z: 0,
        animationEasing: 'elasticOut'
      },
      {
        name: '外框',
        type: 'bar',
        barGap: '-120%', // 设置外框粗细
        data: xData.map((v) => {
          return maxValue
        }),
        barWidth: 25,
        animation: false,
        itemStyle: {
          normal: {
            color: 'rgba(0,0,0,0)', // 填充色
            barBorderColor: '#0ca5ff', // 边框色
            barBorderWidth: 1, // 边框宽度
            barBorderRadius: 3 // 圆角半径
          }
        },
        z: 0
      }
    ]
  }
  return option
}

/**
 * 风玫瑰图
 * seriesData 数据
 * @returns
 */
export const windRoseChart = (seriesData, params = {}) => {
  // 风向 16方位
  const namelist = params.isEnglish ? ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'] : ['北', '东北', '东', '东南', '南', '西南', '西', '西北']
  const option = {
    color: params.isEnglish ? ['#008100', '#2EAF22', '#5CDD45', '#8CFF69', '#BAFF8B', '#E8FFAE', '#FFE8AE', '#FFBA8B', '#FF8C69', '#FF5C45', '#FF2E22', '#FF0000'].reverse() : ['#02e101', '#f9fc04', '#fa7e00', '#fc0302', '#a90052', '#830025'],
    title: {
      show: params.isEnglish,
      text: '风玫瑰图',
      textStyle: {
        fontSize: '16px',
        color: '#1396ff'
      },
      left: '30%'
    },
    legend: {
      show: true,
      orient: 'vertical',
      textStyle: {
        color: '#fff'
      },
      right: 10,
      y: 'center',
      selectedMode: false,
      itemWidth: params.isEnglish ? 15 : 5,
      itemHeight: params.isEnglish ? 15 : 30,
      itemGap: params.isEnglish ? 10 : 0,
      icon: params.isEnglish ? 'circle' : 'rect'
    },
    polar: {
      radius: '70%',
      center: params.isEnglish ? ['40%', '55%'] : ['40%', '50%']
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line'
      },
      confine: true,
      formatter: (params) => {
        let windName = ''
        switch (params[0].value[1]) {
          case 0:
            windName = '北风'
            break
          case 45:
            windName = '东北风'
            break
          case 90:
            windName = '东风'
            break
          case 135:
            windName = '东南风'
            break
          case 180:
            windName = '南风'
            break
          case 225:
            windName = '西南风'
            break
          case 270:
            windName = '西风'
            break
          case 315:
            windName = '西北风'
            break
        }
        let str = windName + '：<br/>'
        params.forEach((v) => {
          str += v.marker + '' + v.seriesName + ':' + v.value[0] + '%<br/>'
        })
        return str
      }
    },
    angleAxis: {
      type: 'value',
      startAngle: 90,
      min: 0, // 最小刻度
      max: 360, // 最大刻度
      interval: 360 / namelist.length, // 间隔刻度 16方位间隔22.5，可改8方位
      axisLabel: {
        formatter: function(value, index) {
          return namelist[index]
        },
        color: '#ebfbff'
      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#0865a0'
        }
      },
      splitLine: {
        show: params.isEnglish,
        lineStyle: {
          color: '#0865a0'
        }
      },
      z: 9
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {
          name: params.saveAsImageName || '统计图',
          show: params.showSaveAsImage || false
        }
      },
      right: 50,
      iconStyle: {
        borderColor: '#000'
      }
    },
    radiusAxis: {
      axisLabel: {
        margin: 22,
        color: '#fff',
        formatter: '{value}'
      },
      axisTick: {
        length: 20,
        lineStyle: {
          color: '#fff'
        }
      },
      axisLine: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: '#0865a0'
        }
      },
      z: 10
    },
    series: seriesData.map((v) => {
      const defaultSeries = {
        coordinateSystem: 'polar',
        name: v.name || '风向风速',
        type: v.type || 'bar'
      }
      return Object.assign(v, defaultSeries)
    })
  }
  return option
}

/**
 * 盒须图
 * seriesData 数据
 * @returns
 */
export const boxplotChart = (xAxisData, seriesData) => {
  const colors = ['#6395f9', '#62daab', '#f6c022', '#e96c5b', '#74cbed', '#9967bd', '#ff9d4e', '#299998']
  const option = {
    tooltip: {
      trigger: 'item',
      axisPointer: {
        type: 'shadow'
      },
      formatter: (item) => {
        const unit = item.name === 'CO' || item.name === 'Co' ? ' mg/m³' : ' μg/m³'
        if (item.componentType !== 'markPoint' && item.seriesType !== 'bar') {
          return `${item.marker}${item.seriesName}（${item.name}）：<br/>最大值：${item.value[1]}${unit}<br/>上四分位：${item.value[2]}${unit}<br/>中位数：${item.value[3]}${unit}<br/>下四分位：${item.value[4]}${unit}<br/>最小值：${item.value[5]}${unit}<br/>${item.name}平均值：${item.value[6]}${unit}`
        }
      }
    },
    legend: {
      show: false,
      selectedMode: false
    },
    grid: {
      left: '0',
      right: '10px',
      bottom: '10px',
      top: '10px',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      boundaryGap: true,
      nameGap: 30,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#506b7c'
        }
      },
      axisTick: {
        show: true,
        lineStyle: {
          color: '#506b7c'
        }
      },
      axisLabel: {
        color: '#9eccef',
        width: 100
      },
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed', // 虚线
          color: '#00BFF3',
          opacity: 0.23
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#506b7c'
        }
      },
      axisLabel: {
        show: true,
        margin: 20,
        textStyle: {
          color: '#9eccef'
        }
      },
      axisTick: {
        show: false
      }
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {
          name: '统计图',
          show: false
        }
      },
      right: 50,
      iconStyle: {
        borderColor: '#000'
      }
    },
    series: seriesData.map((v, i) => {
      const defaultSeries = {
        name: v.name || '盒须图',
        type: v.type || 'boxplot',
        itemStyle: v.itemStyle
          ? v.itemStyle
          : {
            color: 'rgba(0,0,0,0)',
            borderWidth: 2,
            borderColor: colors[i]
          }
      }
      return Object.assign(v, defaultSeries)
    })
  }
  return option
}

/**
 * 热力图
 * xAxisData x轴数据
 * yAxisData y轴数据
 * seriesData 数据
 * @returns
 */
export const heatmapChart = (xAxisData, yAxisData, seriesData) => {
  const option = {
    tooltip: {
      show: true,
      type: 'axis',
      position: 'top',
      formatter: (obj) => {
        return obj.marker + '' + obj.seriesName + '<br/>' + obj.name + '-' + yAxisData[obj.value[obj.value.length - 2]] + '：' + obj.value[obj.value.length - 1]
      }
    },
    grid: {
      width: '90%',
      height: '87%',
      top: '5%',
      right: '10%',
      left: '0'
    },
    xAxis: {
      type: 'category',
      data: xAxisData || ['COD', '总氮', '氨氮', '电导率', '总磷', '浊度', 'pH'],
      splitArea: {
        show: true
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      }
    },
    yAxis: {
      type: 'category',
      data: yAxisData || ['总氮', '氨氮', '电导率', '总磷', '浊度', 'pH', '水温'],
      splitArea: {
        show: true
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      }
    },
    visualMap: {
      type: 'continuous',
      min: -0.86,
      max: 0.86,
      calculable: true,
      precision: 2,
      top: 'center',
      right: '10px',
      bottom: '0',
      textStyle: {
        color: '#fff'
      },
      inRange: {
        color: ['#29D496', '#72DEB7', '#B4E6D2', '#F2ECEC', '#ff999e', '#ff4042', '#ff0000']
      }
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {
          name: '统计图',
          show: false
        }
      },
      right: 50,
      iconStyle: {
        borderColor: '#000'
      }
    },
    series: seriesData.map((v) => {
      const defaultSeries = {
        name: v.name ? v.name : '数据资源监控',
        type: 'heatmap',
        label: {
          show: true
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
      return Object.assign(v, defaultSeries)
    })
  }
  return option
}

/**
 * 饼图
 * @param {*} yData Y轴数据
 * @param {*} category 数据
 * @returns
 */
export const pieChart2 = (params = {}, data) => {
  const option = {
    title: {
      show: false,
      text: params.text || '200',
      subtext: params.subtext || '污染问题',
      x: 'center',
      y: '39%',
      itemGap: 5,
      textStyle: {
        color: '#00fde5',
        fontWeight: 'bold',
        fontSize: 30
      },
      subtextStyle: {
        color: '#00fde5',
        fontWeight: 'bold',
        fontSize: 18
      }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      show: false,
      selectedMode: false,
      orient: 'vertical',
      left: 'left'
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {
          name: params.saveAsImageName || '统计图',
          show: params.showSaveAsImage || false
        }
      },
      right: 50,
      iconStyle: {
        borderColor: '#000'
      }
    },
    series: [
      {
        type: 'pie',
        radius: ['64%', '72%'],
        hoverAnimation: false,
        animation: false,
        zlevel: 1,
        silent: true,
        data: [
          { value: 1, itemStyle: { color: 'rgba(0,0,0,0)' }},
          { value: 6, itemStyle: { color: '#3e638b' }},
          { value: 1, itemStyle: { color: 'rgba(0,0,0,0)' }},
          { value: 2, itemStyle: { color: '#3e638b' }}
        ],
        label: {
          show: false
        },
        tooltip: {
          show: false
        }
      },
      {
        type: 'pie',
        radius: ['52%', '60%'],
        hoverAnimation: false,
        animation: false,
        zlevel: 2,
        data: data || [
          { value: 78, itemStyle: { color: '#08c2fc' }, name: '机动车尾气OBD监测', label: { color: '#08c2fc' }},
          { value: 70, itemStyle: { color: '#fce203' }, name: '异味污染监测', label: { color: '#fce203' }},
          { value: 12, itemStyle: { color: '#fe7801' }, name: '遥感监测污染问题', label: { color: '#fe7801' }},
          { value: 12, itemStyle: { color: '#8e3bf6' }, name: '矿区扬尘视频监控', label: { color: '#8e3bf6' }},
          { value: 22, itemStyle: { color: '#00fad5' }, name: '污染源企业在线监控', label: { color: '#00fad5' }}
        ],
        label: {
          padding: [0, -140, 5, -140],
          fontSize: 13,
          formatter: '{b}\n行业占比{c}  {d}%',
          lineHeight: 25,
          color: '#fff'
        },
        labelLine: {
          length: 20,
          length2: 140,
          lineStyle: {
            width: 2
          }
        }
      },
      {
        type: 'pie',
        radius: ['36%', '40%'],
        hoverAnimation: false,
        animation: false,
        zlevel: 1,
        silent: true,
        data: [
          { value: 1, itemStyle: { color: 'rgba(0,0,0,0)' }},
          { value: 6, itemStyle: { color: '#159eb1' }},
          { value: 1, itemStyle: { color: 'rgba(0,0,0,0)' }},
          { value: 2, itemStyle: { color: '#159eb1' }}
        ],
        label: {
          show: false
        },
        tooltip: {
          show: false
        },
        itemStyle: {
          borderRadius: 5
        }
      }
    ]
  }
  return option
}

/**
 * 桑基图
 * @param {Array} data Y轴数据
 * @param {Array} links 数据
 * @param {Object} params 参数
 * @returns
 */
export const sankeyChart = (data, links, params = {}) => {
  const option = {
    tooltip: {
      trigger: 'item'
      // formatter: (item) => {
      //   if (item.dataType === 'node') {
      //     return item.marker + ' ' + item.name + '：' + item.value.toFixed(2) + '%'
      //   } else if (item.dataType === 'edge') {
      //     return item.name + '：' + item.value.toFixed(2) + '%'
      //   }
      // }
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {
          name: params.saveAsImageName || '统计图',
          show: params.showSaveAsImage || false
        }
      },
      right: 50,
      iconStyle: {
        borderColor: '#000'
      }
    },
    series: {
      type: 'sankey',
      left: params.gridLeft || '20',
      top: params.gridTop || '50',
      right: params.gridRight || '30',
      bottom: params.gridBottom || '10',
      draggable: false,
      layoutIterations: 0,
      emphasis: {
        focus: 'adjacency'
      },
      label: {
        color: '#333'
      },
      data:
        data.map((v, i) => {
          const defaultSeries = {
            name: v.name || '',
            label: {
              position: v.name.indexOf('三级') !== -1 ? 'left' : 'right'
            }
          }
          return Object.assign(v, defaultSeries)
        }) || [],
      links: links || [],
      lineStyle: {
        color: 'target',
        curveness: 0.8
      }
    }
  }
  return option
}

/**
 * 饼图
 * @param {*} seriesData 数据
 * @param {*} params 配置参数
 * @returns
 */
export const pie3DChart = (seriesData, params = {}) => {
  const colors = params.colors || ['#00c3f8', '#2cff95', '#ffda00', '#ff9750', '#ff2400', '#7b7bff', '#d374f4', '#ff6490', '#ff9750', '#ffbb00', '#a0e200', '#f1b960']

  // 计算
  function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {
    const midRatio = (startRatio + endRatio) / 2

    const startRadian = startRatio * Math.PI * 2
    const endRadian = endRatio * Math.PI * 2
    const midRadian = midRatio * Math.PI * 2

    // 如果只有一个扇形，则不实现选中效果。
    if (startRatio === 0 && endRatio === 1) {
      isSelected = false
    }
    // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
    k = typeof k !== 'undefined' ? k : 1 / 3

    // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
    const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
    const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0

    // 计算高亮效果的放大比例（未高亮，则比例为 1）
    const hoverRate = isHovered ? 1.05 : 1
    // 返回曲面参数方程
    return {
      u: {
        min: -Math.PI,
        max: Math.PI * 3,
        step: Math.PI / 32
      },

      v: {
        min: 0,
        max: Math.PI * 2,
        step: Math.PI / 20
      },

      x: function(u, v) {
        if (u < startRadian) {
          return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
        }
        if (u > endRadian) {
          return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
        }
        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
      },

      y: function(u, v) {
        if (u < startRadian) {
          return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
        }
        if (u > endRadian) {
          return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
        }
        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
      },

      z: function(u, v) {
        if (u < -Math.PI * 0.5) {
          return Math.sin(u)
        }
        if (u > Math.PI * 2.5) {
          return Math.sin(u)
        }
        return Math.sin(v) > 0 ? 1 * height : -1
      }
    }
  }

  // 生成模拟 3D 饼图的配置项
  function getPie3D(pieData, internalDiameterRatio) {
    const series = []
    let sumValue = 0
    let startValue = 0
    let endValue = 0
    const legendData = []
    const k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3
    // 为每一个饼图数据，生成一个 series-surface 配置
    for (let i = 0; i < pieData.length; i++) {
      sumValue += pieData[i].value
      const seriesItem = {
        name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
        type: 'surface',
        parametric: true,
        wireframe: {
          show: false
        },
        pieData: pieData[i],
        pieStatus: {
          selected: false,
          hovered: false,
          k: k
        }
      }
      if (typeof pieData[i].itemStyle !== 'undefined') {
        const itemStyle = {}
        typeof pieData[i].itemStyle.color !== 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null
        typeof pieData[i].itemStyle.opacity !== 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null
        seriesItem.itemStyle = itemStyle
      }
      series.push(seriesItem)
    }
    for (let i = 0; i < series.length; i++) {
      endValue = startValue + series[i].pieData.value
      series[i].pieData.startRatio = startValue / sumValue
      series[i].pieData.endRatio = endValue / sumValue
      series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, series[i].pieData.value)
      startValue = endValue
      legendData.push(series[i].name)
    }
    return series
  }

  const rich = {}
  const richOld = {
    a: {
      width: params.legendWidth || 100,
      padding: params.legendPadding || [0, 0, 0, 15]
    }
  }
  colors.forEach((item, index) => {
    rich[`point${index}`] = { // 图例样式
      width: params.iconWidth || 6,
      height: params.iconHeight || 12,
      borderRadius: params.iconRadius || 2,
      backgroundColor: colors[index]
    }
    rich[`c${index}`] = {
      align: 'right'
    }
  })
  const option = {
    color: colors,
    title: {
      text: params.text || '69', // 标题
      subtext: params.subtext || '总数', // 小标题
      x: params.titleX || '33%',
      y: params.titleY || '43%',
      itemGap: params.titleItemGap || 0, // 主副标题之间的间距
      textAlign: 'center',
      textStyle: { // 标题样式
        color: params.textColor || '#ffffff',
        fontSize: params.textFontSize || 46,
        fontWeight: params.textFontWeight || 'bold',
        fontStyle: params.textFontStyle || 'italic'
      },
      subtextStyle: { // 副标题样式
        color: params.subtextColor || '#ffffff',
        fontSize: params.subtextFontSize || 18,
        fontWeight: params.subtextFontWeight || 'bold',
        fontStyle: params.subtextFontStyle || 'italic'
      }
    },
    legend: {
      show: params.legendShow || false,
      selectedMode: params.selectedMode || false,
      orient: params.legendOrient || 'vertical',
      right: params.legendRight || '14%',
      top: params.legendTop || 'center',
      icon: 'none',
      itemGap: params.legendItemGap || 16,
      formatter(name) { // 该函数用于设置图例显示后的百分比quanmei
        let total = 0
        let value = 0
        const idx = seriesData.findIndex((item) => item.name === name)
        seriesData.forEach((item) => {
          total += item.value
          if (item.name === name) {
            value = item.value
          }
        })
        const p = ((value / total) * 100).toFixed(2)
        return [`{point${idx}|}{a|${name}}{b|}{d|}{c${idx}|${p || '0'}%}`]
      },
      textStyle: {
        color: params.legendColor || '#fff',
        fontSize: params.legendFontSize || 14,
        fontFamily: 'Bebas',
        rich: { ...rich, ...richOld }
      }
    },
    animation: true,
    tooltip: {
      formatter: params.tooltipFormatter || function(param) {
        if (param.seriesName !== 'mouseoutSeries' && param.seriesName !== 'pie2d') {
          return `${param.marker}\t\t${param.seriesName}：${option.series[param.seriesIndex].pieData.value}${params.dataUnit || ''}`
        }
      }
    },
    xAxis3D: {
      min: -1,
      max: 1
    },
    yAxis3D: {
      min: -1,
      max: 1
    },
    zAxis3D: {
      min: -1,
      max: 1
    },
    grid3D: {
      show: false,
      boxHeight: params.boxHeight || 0.8, // 饼图高度
      left: params.gridLeft || -150, // 可为负数
      top: params.gridTop || '5%', // 可为负数
      viewControl: {
        alpha: params.alpha || 20, // 翻转倾斜角度
        zoomSensitivity: 0,
        panSensitivity: 0,
        rotateSensitivity: 0,
        distance: params.distance || 200 // 可调整饼图大小
      },
      postEffect: {
        enable: false,
        bloom: {
          enable: true,
          bloomIntensity: 0.1
        },
        SSAO: {
          enable: true,
          quality: 'medium',
          radius: 2
        }
      }
    },
    series: getPie3D(seriesData, 0.69, 240, 128, 126, 1.5)
  }
  return option
}
